import 'package:flutter/material.dart';
import 'base_select_triangle_block.dart';
import 'package:x3_base_core/x3_base_core.dart';

class BaseAdvancedSelectButtonStyleTwo extends StatefulWidget {
  final double height;
  final bool isSelected;
  final BaseKeyValueModel model;
  final Function(bool) onChange;

  const BaseAdvancedSelectButtonStyleTwo({Key key, @required this.height, this.isSelected = false, @required this.model, this.onChange}) : super(key: key);

  @override
  _BaseHeadAdvancedSelectButton createState() => _BaseHeadAdvancedSelectButton();
}

class _BaseHeadAdvancedSelectButton extends State<BaseAdvancedSelectButtonStyleTwo> {
  final BorderRadius _borderRadius = BorderRadius.all(Radius.circular(4));

  /// 选中背景颜色
  final Color selectedBgColor = Colors.white;

  /// 选中字体
  final Color selectedText = Color(0xFFFF004F);

  /// 未选中背景颜色
  final Color notSelectedBgColor = Colors.white;

  /// 未选中
  final Color notSelectedText = Color(0xff333333);
  bool selectedState;

  /// 背景颜色
  Color get bgColor => selectedState == true ? selectedBgColor : notSelectedBgColor;

  /// 字体颜色
  Color get textColor => selectedState == true ? selectedText : notSelectedText;

  /// 线条颜色
  Color get borderColor => selectedState == true ? selectedText : Color(0xFFDFDFDF);

  /// 按钮最小宽度
  double get buttonMinWidth => (MediaQuery.of(context).size.width - 16 * 2 - 64 - 12 - 8 * 3) / 4;

  @override
  void initState() {
    selectedState = widget.isSelected;
    super.initState();
  }

  @override
  void didUpdateWidget(covariant BaseAdvancedSelectButtonStyleTwo oldWidget) {
    if (widget.isSelected != oldWidget.isSelected) {
      selectedState = widget.isSelected;
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.height ?? 0,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Stack(
            clipBehavior: Clip.antiAlias,
            children: [
              Material(
                borderRadius: _borderRadius,
                color: bgColor,
                child: Container(
                  height: 32,
                  child: InkWell(onTap: _onChange, borderRadius: _borderRadius, child: _buildButton()),
                ),
              ),
              Positioned(
                right: 0.0,
                bottom: 0.0,
                child: BaseSelectTriangleBlock(
                  colorBlockSize: widget.height / 2,
                  bgColor: selectedState ? Color(0xFFFF004F) : Colors.transparent,
                  tickColor: selectedState ? Colors.white : Colors.transparent,
                ),
              ),
            ],
          )
        ],
      ),
    );
  }

  Widget _buildButton() {
    return AnimatedContainer(
      decoration: BoxDecoration(border: Border.all(width: 0.8, color: borderColor), borderRadius: _borderRadius),
      constraints: BoxConstraints(minWidth: buttonMinWidth),
      padding: EdgeInsets.symmetric(horizontal: 8),
      alignment: Alignment.center,
      duration: Duration(milliseconds: 300),
      child: _buildText(),
    );
  }

  Widget _buildText() {
    return Text(widget.model.value ?? '', style: TextStyle(fontSize: 13, color: textColor));
  }

  void _onChange() {
    selectedState = !selectedState;
    if (widget.onChange != null) widget.onChange(selectedState);
  }
}
